<template>
  <div id="Statistics">
    <div class="title">统计</div>
    <div id="echarts-pies"></div>
  </div>
</template>
<script>
export default {
  name: "Statistics",
  components: {},
  props: {},
  data() {
    return {
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
      yData: [2, 4, 6, 8, 10, 12, 14], //数据
    };
  },
  computed: {},
  watch: {},
  created() {},

  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(document.getElementById("echarts-pies"));
      var option = {
        xAxis: {
          name: "日期",
          data: this.xData,
          axisLine: {
            show: true, // Y轴
            lineStyle: {
              color: "#fff", // 颜色
            },
          },
        },
        yAxis: {
          name: "单位",
          axisTick: {
            //y轴刻度线
            // show: true,
          },
          axisLine: {
            show: true, // Y轴
            lineStyle: {
              color: "#fff", // 颜色
            },
          },
          splitLine: {
            // 表格里面Y轴线条
            show: true,
            color: "#fff",
          },
        },
        grid: {
          show: true,
          left: "5%",
          top: "25%",
          right: "20%",
          bottom: "15%",
        },
        series: [
          {
            type: "bar",
            data: this.yData,
            barWidth: "10%",
            barCategoryGap: "40%",
          },
        ],
      };

      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.getLoadEcharts();
  },
};
</script>
<style scoped>
#Statistics {
  width: 78%;
  height: 30%;
  float: left;
  position: relative;
}
.title {
  width: 100%;
  height: 12%;
  vertical-align: middle;
  background: transparent;
  background: rgba(15, 48, 113, 1);
  color: #fff;
}
#echarts-pies {
  background: #07225d;
  opacity: 0.5;
  width: 100%;
  height: 88%;
}
</style>
